<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate ></v-progress-linear>

         <v-app-bar app elevation="0" dense color="primary">
            <v-btn icon @click="$router.go(-1)" color="white">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1 white--text">{{appTitle}}</v-toolbar-title>

            <v-btn plain text :ripple="false">
            </v-btn>
        </v-app-bar>

        <v-container style="background-color: #BA2B39;" class="white--text pa-4 py-8">
        </v-container>
         <v-container class="mt-n16">
            <v-card elevation="0" class="rounded-lg">
                <v-row class="pa-4  mt-0" dense>


                    <v-col cols="6">
                        <div class="text-caption font-weight-medium">我的推荐人：{{parentData.name}}</div>
                        <div class="text-caption font-weight-medium">手机号：{{parentData.mobile}}</div>
                    </v-col>


                    <v-col cols="6">
                        <div class="text-caption font-weight-medium">团队人数：{{invite_count}}人</div>
                        <div class="text-caption font-weight-medium">团队总业绩：{{team_ticket}}</div>
                    </v-col>

<!--                    <v-col cols="6">-->
<!--                        <span class="text-h6">共</span>-->
<!--                        <span class="text-h6">团队人数{{invite_count}}人</span>-->
<!--                        <span class="text-caption">人</span>-->
<!--                    </v-col>-->
                </v-row>
            </v-card>
        </v-container>

        <v-container class="pt-0">
            <v-card elevation="0" class="mb-2 pa-4 text--primary" v-for="item of items" :key="item.id">
                <v-row dense align="center"  no-gutters>
                    <v-col cols="6" class="text-h6">
                        {{item.name}}
                    </v-col>
                    <v-col cols="6" class="text-right">
                        <div>{{item.created_at}}</div>
                        <div>金币：{{item.ticket}}，现金：{{item.money}}</div>
                    </v-col>

                    <v-col cols="6" class="text-h6">
                        {{item.phone}}
                    </v-col>


                    <v-col cols="6" class="text-right">
                        <v-btn small depressed color="primary" v-if="item.kyc == 2 "> {{item.kyc_name}} </v-btn>
                        <v-btn small depressed color="default" v-else> {{item.kyc_name}} </v-btn>
                    </v-col>
                </v-row>
            </v-card>

             <v-row dense v-if="items.length > 0">
                <v-col cols="12"  v-intersect="loadMore" v-if="!finished">
                    <v-btn :ripple="false" plain text block @click="loadMore" :loading="loading">加载更多</v-btn>
                </v-col>
                <v-col cols="12" v-else>
                    <v-btn disabled plain text block>没有更多数据了...</v-btn>
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from 'vuex';

export default {
    data: () => ({
        loading: false,
        invite_count: 0,
        team_ticket: 0,
        parentData: [],
        items: [],
        pageNo: 1,
        pageSize: 10,
        finished: false
    }),
    computed: {
        appTitle() {
            return "我的合伙人";
        },
        ...mapGetters([
            'uid'
        ]),
    },
    created() {
        this.load();
    },
    methods: {
        load() {
            const that = this;
            that.loading = true;
            axios.get(`/v1/user/my-invite`,{ params: {
                        pageSize: this.pageSize,
                        page: this.pageNo }
            }).then((response) => {
                if (response.data.code == 0) {
                    that.items = that.items.concat(response.data.data.items);
                    that.parentData = response.data.data.parentData;
                    that.invite_count = response.data.data.invite_count;
                    that.team_ticket = response.data.data.team_ticket;
                    if (response.data.data.items.length < that.pageSize) {
                        that.finished = true;
                    }
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
            .catch(function () {})
            .then(function () {
                 that.loading = false;
            });
        },
        loadMore() {
            this.pageNo++;
            this.load();
        },
    }
};
</script>

<style lang="scss">

</style>
